<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>列表页面</title>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://www.jq22.com/jquery/bootstrap-3.3.4.css"
    />
    <link
      rel="stylesheet"
      href="https://meyerweb.com/eric/tools/css/reset/reset200802.css"
    />
    <link rel="stylesheet" href="stylesheets/pagination.css" />
    <link rel="stylesheet" href="font/iconfont.css" />
    <link rel="stylesheet" href="stylesheets/headerfooter.css" />
    <link rel="stylesheet" href="stylesheets/list.css" />

    <script src="javascripts/main.js" type="module" id="list"></script>
  </head>
  <body>
    <header></header>
    <nav class="wrapper">
      <div class="nav_title">
        <h2>
          <a href="">首页</a
          ><span class="iconfont icon-jiantou_liebiaoxiangyou_o"></span
          ><a href="">平板/存储</a
          ><span class="iconfont icon-jiantou_liebiaoxiangyou_o"></span
          ><a href="">Galaxy Tab S</a>
        </h2>
      </div>
      <div class="nav_content">
        <dl>
          <dt>分类</dt>
          <dd><a href="javascript:;">全部</a></dd>
          <dd><a href="javascript:;">Galaxy Tab S</a></dd>
          <dd><a href="javascript:;" class="active">Galaxy Tab A</a></dd>
          <dd><a href="javascript:;">固态硬盘SSD</a></dd>
          <dd><a href="javascript:;">移动固态硬盘</a></dd>
          <dd><a href="javascript:;">存储卡</a></dd>
          <dd><a href="javascript:;">USB闪存盘</a></dd>
        </dl>
        <dl>
          <dt>活动</dt>
          <dd><a href="javascript:;">新品</a></dd>
          <dd><a href="javascript:;" class="active">折扣</a></dd>
          <dd><a href="javascript:;">减免</a></dd>
          <dd><a href="javascript:;">免息</a></dd>
          <dd><a href="javascript:;">买赠</a></dd>
          <dd><a href="javascript:;">即将到货</a></dd>
          <dd><a href="javascript:;">优惠券</a></dd>
          <dd><a href="javascript:;">以旧换新</a></dd>
          <dd><a href="javascript:;">预售</a></dd>
          <dd><a href="javascript:;">立省</a></dd>
        </dl>
        <dl>
          <dt>排序</dt>
          <dd><a href="javascript:;" class="active">默认</a></dd>
          <dd><a href="javascript:;">热卖</a></dd>
          <dd><a href="javascript:;" class="price">价格升序</a></dd>
          <dd><a href="javascript:;" class="price-desc">价格降序</a></dd>
        </dl>
      </div>
    </nav>
    <main class="wrapper">
      <ul class="list"></ul>
      <!-- 添加分页结构 -->
      <div class="pagelist">
        <div class="m-style page"></div>
      </div>
    </main>
    <footer></footer>
  </body>
</html>
